<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CryptedUniversity</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="screen-orientation" content="portrait" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <link rel="shortcut icon" type="image/ico" href="../favicon.ico" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    
      <link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/star.css">

    
  </head>
  <body>
    <div class="app" id="app" v-lock>
      <div class="content">
      	<div class="container black">
      		<!-- menu -->
          <nav class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="./index.html">
        <img alt="brand" class="brand1" src="../icon/gamelogo1.png" style="width: 322px; height: 71px;">
        <img alt="brand" class="brand2" src="../icon/gamelogo2.png" style="width: 322px; height: 71px;">
      </a>
    </div>
    <div class="navbar-text navbar-right">
    		<a v-if="nickshow" class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-lg" style="padding: 2px 12px;">{{nick}} <img v-if="ctryid != '999'" class="flag" :src="changectry(ctryid)"/></a>
      	<a href="./star.html#" class="navbar-link n-link">{{lge.header.nav1}}</a>
      	<a href="./star.html#mystar" class="navbar-link n-link">{{lge.header.nav2}}</a>
      	<a class="navbar-link n-link" id="logininfo" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="bottom" :data-content="account"><img class="ytf" v-if="account.length>20" src="../icon/denglu001.png"/><img class="ytf" v-if="account.length<=20" src="../icon/denglu002.png"/></a>
    </div>
  </div>
</nav>

          <!-- menu end -->
      	</div>
      	<div class="container">
          <!-- alter -->
          <div class="alert alert-danger" role="alert" v-if="account.length<20" v-html="lge.tip1"></div>
          <div class="alert alert-success" role="alert" v-if="online" v-html="lge.tip2"></div>
      	</div>
      	<!-- star -->
        <div class="container" v-if="!isMyStar">
          <!-- illustart start -->
          <h2 class="text-center">{{lge.universe}}</h2>
          <div class="row">
            <div class="col-md-3">
            		<div class="input-group s-group" v-for="(el, index) in ranklist" v-if="el" data-trigger="hover" data-container="body" data-placement="top" data-html="true" :data-content="lge.scount+':<b>'+el.count+'</b> '+lge.sprice+':<b>'+eth(el.price)+'ETH</b>'" @mouseenter="enter(el.user)" @mouseleave="leave"><div class="input-group-addon s-seq">{{index+1}}</div><div class="input-group-addon s-end">{{el.nick}}</div></div>
            </div>
            <div class="col-md-9">
              <div class="s-yzbox">
                <div class="roteX run" id="yzhou">
                	<div data-trigger="hover" data-container="body" data-placement="top" data-html="true" :data-content="'<b>SUN</b> '+lge.notOpen" class="sun" :class="{'op': isme(hoveruser, 'sun')}"></div>
                	<div data-trigger="hover" data-container="body" data-placement="top" data-html="true" :data-content="'<b>Earth</b> '+lge.notOpen" class="earth" :class="{'op': isme(hoveruser, 'earth')}"></div>
                  <div v-for="(star, ename) in starlist" data-trigger="hover" data-container="body" data-placement="top" data-html="true" :data-content="ename+'</br><b>'+star.nick+'</b> <b>'+eth(star.price)+'ETH</b>'" :class="[ename, {'op': isme(hoveruser, star.user)}]"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="btn-toolbar toolbar" role="toolbar" aria-label="...">
            <div class="btn-group" role="group" aria-label="..."><h3><span class="label label-default" style="background: #1b1c1d;">{{lge.solar}}</span></h3></div>
          </div>
          <div class="row">
            <div class="col-md-10"></div>
            <div class="col-md-2">
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">{{sortName}} <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a @click="changeSort(1, lge.raise)">{{lge.raise}}</a></li>
                  <li><a @click="changeSort(2, lge.reduce)">{{lge.reduce}}</a></li>
                  <!--<li role="separator" class="divider"></li>
                  <li><a href="#">{{lge.New}}</a></li>
                  <li><a href="#">{{lge.old}}</a></li>-->
                </ul>
              </div>
            </div>
          </div>
          <!-- goods list-->
          <div class="row card-list">
            <div class="col-md-3 col-xs-6" v-for="item in dataList">
              <div class="card">
                <div class="card-pic">
                  <img v-if="item.ctryid !== '999'" :src="changectry(item.ctryid, true)" class="card-brand">
                  <span class="card-starname">{{lgename === 'English' ? item.ename : item.cname}}</span>
                  <img :src="'../images/g'+item.gyun+'.png'" class="card-gyun" v-if="item.price > 140000000000000000" :class="item.ename"/>
                  <img :src="'../images/'+item.imgname+'.png'" class="card-starpic" :alt="item.countr">
                </div>
                <div class="card-owner">{{item.nick}}</div>
                <div class="card-info">
                  <div class="row">
                    <div class="col-md-5">
                      <span>{{lge.volume}}</span>
                      <p>{{item.mass}}</p>
                    </div>
                    <div class="col-md-7">
                      <span>{{lge.quality}}</span>
                      <p>{{item.volume}}</p>
                    </div>
                  </div>
                  <div class="card-price">
                    <div class="input-group" @click="buy(item)">
                      <span class="input-group-addon">{{lge.price}}</span>
                      <p class="form-control card-txt">{{item.price | eth}} ETH</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- mystar -->
        <div class="container mh800" v-if="isMyStar">
        	<!-- my goods list-->
          <div class="row card-list">
            <div class="col-md-3 col-xs-6" v-for="item in myDataList">
              <div class="card">
                <div class="card-pic">
                  <img v-if="item.ctryid !== '999'" :src="changectry(item.ctryid, true)" class="card-brand">
                  <span class="card-starname">{{lgename === 'English' ? item.ename : item.cname}}</span>
                  <img :src="'../images/'+item.imgname+'.png'" class="card-starpic" :alt="item.countr">
                </div>
                <div class="card-owner">{{item.nick}}</div>
                <div class="card-info">
                  <div class="row">
                    <div class="col-md-4">
                      <span>{{lge.volume}}</span>
                      <p>{{item.mass}}</p>
                    </div>
                    <div class="col-md-8">
                      <span>{{lge.quality}}</span>
                      <p>{{item.volume}}</p>
                    </div>
                  </div>
                  <div class="card-price">
                    <div class="input-group">
                      <span class="input-group-addon">{{lge.price}}</span>
                      <p class="form-control card-txt">{{item.price | eth}} ETH</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width: 760px;position:relative;" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">{{lgename === 'English' ? buyinfo.ename : buyinfo.cname}} <i class="glyphicon glyphicon-refresh" @click="refreshInfo"></i></h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-pic">
                      <img v-if="buyinfo.ctryid !== '999'"  :src="changectry(buyinfo.ctryid, true)" class="card-brand">
                      <span class="card-starname">{{buyinfo.sname}}</span>
                      <img :src="'../images/'+buyinfo.imgname+'.png'" class="card-starpic" style="margin-top: 32%;">
                    </div>
                    <div class="card-owner">{{buyinfo.nick}}</div>
                  </div>
                </div>
                <div class="col-md-8">
                  <p>{{lge.binfo1}}{{buyinfo.nprice | eth}} {{lge.binfo2}}{{lgename === 'English' ? buyinfo.ename : buyinfo.cname}}</p>
                  <p>{{lge.binfo3}}{{buyinfo.next | eth}}{{lge.binfo9}}</p>
                  <p>{{lge.binfo4}}</p>
                  <p>{{lge.binfo5}}</p>
                  <p>{{lge.binfo6}}{{time}}{{lge.binfo7}}</p>
                  <p>{{lge.binfo8}}</p>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="card-price">
                <div class="input-group">
                  <p class="form-control card-txt">{{buyinfo.nprice | eth}} ETH</p>
                  <a class="input-group-addon btn btn-primary card-btn" @click="buyok">{{lge.buy}}</a>
                </div>
              </div>
            </div>
          </div>
          <div class="loading" v-show="load">
            <span>loading...</span>
          </div>
        </div>
      </div>
      
      <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
			  <div class="modal-dialog modal-lg" role="document">
			    <div class="modal-content">
			    	<div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			        <h4 class="modal-title" id="myLargeModalLabel"> <i class="glyphicon glyphicon-user"></i> {{lge.upuser}}</h4>
			      </div>
		        <div class="modal-body row">
		        	<div class="col-md-12">
			        	<div class="input-group">
						      <input type="text" class="form-control" placeholder="nickname" v-model="nick">
						      <div class="input-group-btn">
						        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="flag-sm" :src="changectry(ctryid === '999' ? '209' : ctryid)"/> <span class="caret"></span></button>
						        <ul class="dropdown-menu dropdown-menu-right coutr">
						          <li v-for="(stry, index) in ctrylist"  :tilte="stry" @click="selectCtry(index)"><img class="flag" :src="'../icon/flag/'+stry+'.png'"/></li>
						        </ul>
						    	</div><!-- /btn-group -->
						 		</div><!-- /input-group -->
							</div>
			    	</div>
			    	<div class="modal-footer">
			        <a class="btn btn-primary" @click="setUserInfo" data-dismiss="modal">{{lge.save}}</a>
			      </div>
			  	</div>
				</div>
			</div>
      <!--footer-->
      <footer class="footer">
  <div class="container">
    <div class="col-md-2 col-xs-6">
      <h5>{{lge.footer.nav1}}</h5>
      <!-- <a href="./index.html" class="f-link">{{lge.footer.link1}}</a> -->
      <a href="./how.html" class="f-link">{{lge.footer.link2}}</a>
      <a href="./help.html" class="f-link">{{lge.footer.link3}}</a>
      <a href="./news.html" class="f-link">{{lge.footer.link4}}</a>
      <a href="./tos.html" class="f-link">{{lge.footer.link5}}</a>
      <h5>{{lge.footer.nav2}}</h5>
      <a href="./star.html" class="f-link">{{lge.footer.link6}}</a>
      <a href="./star.html#mystar" class="f-link">{{lge.footer.link7}}</a>
      <!-- <a href="#" class="f-link">{{lge.footer.link8}}</a> -->
    </div>
    <div class="col-md-2 col-xs-6">
      <img src="../icon/btclogo.png" alt="">
      </br></br>
      <img src="../icon/metamask.png" alt="">
    </div>
    <div class="col-md-5 col-xs-2">
    	
    </div>
    <div class="col-md-3 col-xs-12">
    	</br></br><br><br><br>
      <h5>All rights reserved. </h5>
      <h5>©2018 CryptedUniversity.io</h5>
      <nav class="navbar f-list">
        <a href="#" class="navbar-link link qq"></a>
        <a href="#" class="navbar-link link fb"></a>
        <a href="#" class="navbar-link link tt"></a>
        <a href="#" class="navbar-link link ml"></a>
        <a href="#" class="navbar-link link tk"></a>
      </nav>
    </div>
  </div>
</footer>
<div class="btn ln-btn">
  <span>{{lgename}}</span>
  <ul>
    <li @click="setlanguage('en')">English</li>
    <!--<li @click="setlanguage('ko')">한국어</li>-->
    <li @click="setlanguage('zh')">中文</li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


  <script src="../js/lib/vue.min.js" charset="utf-8"></script>


      <!--footer end-->
    </div>
    
    
      <script src="../js/i18n/i18n_star.js" charset="utf-8"></script>
<script src="../js/main.js" charset="utf-8"></script>
<script src="../js/star.js" charset="utf-8"></script>

    
  </body>
</html>
